<template>
  <div class="main">
    <div class="bread" style="height: 50px;background: 	#77DDFF">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item style="font-weight: bold;">公司后端</el-breadcrumb-item>
        <el-breadcrumb-item style="font-weight: bold;">岗位管理</el-breadcrumb-item>
        <el-breadcrumb-item style="font-weight: bold;">岗位发布</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form-grid-container" >
      <span class="register-title">职位发布</span>
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>

          <el-col :span="12">
            <el-form-item label="职位名称">
              <el-input v-model="form.title" style="width: 300px;"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="职位类别">
              <el-select v-model="form.categoryId" placeholder="请选择">
                <el-option
                    v-for="item in categories"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="工作城市">
<!--              <el-input v-model="form.city" style="width: 300px;"></el-input>-->
              <el-select v-model="form.city" placeholder="请选择">
                <el-option label="杭州"  value="杭州"></el-option>
                <el-option label="皮城"  value="皮城"></el-option>
                <el-option label="诺克萨斯"  value="诺克萨斯"></el-option>
                <el-option label="上海"  value="上海"></el-option>
                <el-option label="皮城" value="小和山"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="薪资下界(K)">
              <el-input v-model="form.salaryL" style="width: 300px;" ></el-input>
            </el-form-item>
            <el-form-item label="薪资上界(K)">
              <el-input v-model="form.salaryR" style="width: 300px;" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="学历要求">
              <el-select v-model="form.degree" placeholder="请选择">
                <el-option label="不限" value="不限"></el-option>
                <el-option label="大专" value="大专"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="博士" value="博士"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item label="岗位职责">
          <el-input type="textarea" v-model="form.duties" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="岗位要求">
          <el-input type="textarea" v-model="form.requests" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="优先条件">
          <el-input type="textarea" v-model="form.priorities" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker type="date" v-model="form.startTime" style="width: 300px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker type="date" v-model="form.endTime" style="width: 300px;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="onSubmit">立刻发布</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name:"announceJobs",
  data() {
    return {
      form: {
        companyId: 1,//公司ID后期处理---------------------------------------------------------------
        categoryId: '请选择',
        city: '',
        salaryL: 0,
        salaryR: 100,
        degree: '',
        title: '',
        duties: '',
        requests: '',
        priorities: '',
        startTime: '',
        endTime: ''
      },
      salary: '',
      isSalaryValid: true, // 用于判断薪资待遇是否有效
      categories:[],
    }
  },
  methods: {
    fetchCategories() {
      axios.get("/api/category/getAll")
          .then(response => {
            this.categories = response.data;
          })
          .catch(error => {
            console.error(error);
          });
    },

    onSubmit() {
      console.log(this.form);
      // 先处理薪资待遇字符串，提取下限和上限数值
      // const salaryRange = this.salary.split('-').map(item => {
      //   return parseInt(item.trim().replace('k', ''), 10);
      // });
       // this.form.salaryL = salaryRange[0];

      if (this.form.salaryL <= this.form.salaryR) {
        axios.post("/api/jobs/insert", this.form)
            .then(response => {
              console.log(this.form);
              this.$alert(`${this.form.title}职位已发布!`, '提示', {
                confirmButtonText: '确定',
                callback: () => {
                  location.reload();
                }
              });
            })
            .catch(error => {
              console.error(error);
            });
      } else {
        this.$alert(`薪资待遇下界必须小于上界`, '警告', {
          confirmButtonText: '确定',
        });
      }
    },
  },
  mounted() {
    this.fetchCategories();
  }
}
</script>

<style>
.form-grid-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.register-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.bread {
  height: 50px;
  display: flex;
  align-items: center;
}
</style>
